<template>
  <div class="danmu-full-bg">
    <el-card class="danmu-full-card">
      <div style="display: flex; align-items: center; gap: 18px; margin-bottom: 18px;">
        <div class="danmu-title">直播间弹幕实时展示</div>
        <el-switch v-model="danmuEnabled" active-text="弹幕管理已开启" inactive-text="弹幕管理已关闭" style="margin-left: 18px;" />
      </div>
      <template v-if="danmuEnabled">
        <div class="danmu-list" ref="listRef">
          <div v-for="(item, idx) in danmus" :key="idx" class="danmu-item">
            <span class="danmu-user">{{ item.uname }}：</span>
            <span class="danmu-msg">{{ item.msg }}</span>
          </div>
        </div>
        <div v-if="autoRefresh" style="margin-top: 8px; color: #e57373; font-size: 1.08rem; display: flex; align-items: center; gap: 6px;">
          <span style="font-size:1.3em;">⚠️</span>
          <span>开启自动刷新会加剧后端运行压力哦，请酌情使用~ <span style="font-size:1.2em;">(｡•ᴗ-)_🍬</span></span>
        </div>
        <div style="display: flex; gap: 16px; width: 100%; margin-top: 18px; align-items: center;">
          <el-button type="primary" @click="refresh" class="danmu-btn">手动刷新</el-button>
          <el-switch v-model="autoRefresh" active-text="自动刷新" inactive-text="手动模式" style="margin-left: 12px;" />
          <el-select v-model="refreshInterval" :disabled="!autoRefresh" style="width: 120px; margin-left: 12px;" size="small">
            <el-option :label="'3秒'" :value="3000" />
            <el-option :label="'5秒'" :value="5000" />
            <el-option :label="'10秒'" :value="10000" />
          </el-select>
          <span style="margin-left: 4px; color: #888; font-size: 0.98rem;">刷新间隔</span>
        </div>
      </template>
      <template v-else>
        <div style="margin: 48px 0; color: #b48ad6; font-size: 1.25rem; text-align: center;">弹幕管理已关闭，开启开关可恢复功能~</div>
      </template>
    </el-card>
    <div class="dev-info-fixed">© 2025 开发者：六月 | AI Live Assistant</div>
  </div>
</template>
<script setup>
import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
const DANMU_ENABLED_KEY = 'danmuEnabled'
const danmuEnabled = ref(true)
// 初始化时从localStorage读取
if (localStorage.getItem(DANMU_ENABLED_KEY) !== null) {
  danmuEnabled.value = localStorage.getItem(DANMU_ENABLED_KEY) === 'true'
}
const danmus = ref([])
const listRef = ref(null)
const autoRefresh = ref(true)
const refreshInterval = ref(3000)
let timer = null
const fetchDanmu = async () => {
  if (!danmuEnabled.value) return
  try {
    const res = await axios.get('/api/danmu/recent')
    danmus.value = res.data.danmus || []
    await nextTick()
    if (listRef.value) listRef.value.scrollTop = listRef.value.scrollHeight
  } catch (e) {
    // ignore
  }
}
const refresh = fetchDanmu

watch([autoRefresh, refreshInterval, danmuEnabled], ([newAuto, newInterval, newEnabled], [oldAuto, oldInterval, oldEnabled]) => {
  // 持久化 danmuEnabled 状态
  localStorage.setItem(DANMU_ENABLED_KEY, String(newEnabled))
  if (timer) clearInterval(timer)
  if (newEnabled && newAuto) {
    timer = setInterval(() => {
      fetchDanmu()
    }, newInterval)
  } else {
    timer = null
  }
  if (!newEnabled) {
    danmus.value = []
  }
})

onMounted(() => {
  if (danmuEnabled.value) {
    fetchDanmu()
    if (autoRefresh.value) {
      timer = setInterval(() => {
        fetchDanmu()
      }, refreshInterval.value)
    }
  }
})
onUnmounted(() => {
  if (timer) clearInterval(timer)
  timer = null
})
</script>
<style scoped>
.danmu-full-bg {
  min-height: 100vh;
  min-width: 0;
  background: linear-gradient(135deg, #f8e1f4 0%, #e0f7fa 100%);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  position: relative;
  margin: 0;
  padding: 0;
}
  .danmu-full-card {
    width: 100%;
    min-height: 100vh;
    max-width: 100vw;
    margin: 0;
    border-radius: 0;
    background: linear-gradient(120deg, #fff6fa 60%, #e0f7fa 100%);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    position: relative;
    padding: 0;
  }
  .danmu-title {
    font-size: 3rem;
    font-weight: 900;
    color: #b48ad6;
    margin-bottom: 48px;
    letter-spacing: 2px;
    text-shadow: 0 4px 24px #fff6fa;
  }
  .danmu-list {
    width: 100%;
    min-height: 480px;
    max-height: 70vh;
    overflow-y: auto;
    background: #f8e1f4;
    border-radius: 36px;
    padding: 36px;
    font-size: 1.6rem;
    margin-bottom: 48px;
    box-shadow: 0 4px 24px #ffe0f7;
  }
.danmu-item {
  margin-bottom: 12px;
  word-break: break-all;
  display: flex;
  align-items: flex-start;
}
.danmu-user {
  color: #7c5fa3;
  font-weight: bold;
  margin-right: 8px;
}
.danmu-msg {
  color: #333;
}
.danmu-btn {
  width: 100%;
  margin-top: 18px;
  font-size: 1.1rem;
}
.dev-info-fixed {
  position: fixed;
  right: 32px;
  bottom: 18px;
  color: #b48ad6;
  font-size: 1.02rem;
  letter-spacing: 1px;
  opacity: 0.85;
  z-index: 999;
  user-select: none;
}
@media (max-width: 900px) {
  .danmu-full-card {
    width: 98vw;
    min-height: 96vh;
  max-width: 100%;
    border-radius: 18px;
    padding: 24px 8px 24px 8px;
  }
  .danmu-title {
    font-size: 1.3rem;
  }
  .danmu-list {
    font-size: 1rem;
    padding: 10px;
  }
  .dev-info-fixed {
    right: 10px;
    bottom: 8px;
    font-size: 0.92rem;
  }
}
@media (max-width: 600px) {
  .danmu-full-card {
  width: 100%;
    min-height: 100vh;
  max-width: 100%;
    border-radius: 0;
    margin: 0;
    padding: 8px 2px 8px 2px;
  }
  .danmu-title {
    font-size: 1.1rem;
  }
  .danmu-list {
    font-size: 0.92rem;
    padding: 4px;
  }
  .dev-info-fixed {
    right: 2px;
    bottom: 2px;
    font-size: 0.82rem;
  }
}
</style>
